<script setup>
import { ref,reactive, nextTick,onActivated,getCurrentInstance,onMounted, watch  } from 'vue'; 
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
import TopBar from '@/components/Topbar/index.vue';
import { getFieldValue,getLabelById } from '@/utils/common.js'
import { getComboDetail } from '@/api/ShopDatabase/package'
import { useDistInfoStore } from '@/stores/dict.js';
import { getBaseSetting,getAllCommodityExtraAttributes } from '@/api/ShopDatabase/goodsSetting.js'
const route = useRoute();
const router = useRouter();
const distInfoStore = useDistInfoStore();
const backValue = ref('PackageManagementIndex');
const tabName = ref("套餐详情");
const moduleType = ref("基础信息");

const getBrandName = (value)=>{
    let brandName = distInfoStore.getDistInfo("经营品牌").filter(lis=>{
        return value.includes(lis.id);
    }).map(lis=>{
        return lis.permissionName
    })
    return brandName.join(',');
}

const form = ref({
    code:"",
    comboName:"",
    mnemonicCode:"",
    businessBrandId:[],
    activityImg:[],
    validity:"",
    salesState:1,
    salesClass:[],
    retailPrice:"",
    costPrice:"",
    minSellingPrice:'', //最低售价
    needValue:"1"
})
const shopForm = ref({
    mallInfoPut:1,
    mallInfoValidity:"",
    mallInfoDetails:"",
    mallPictureList:[],
    purchaseNotes:""
})
const comboAttributesList = ref([]);
const checkData = ref([]);
const checkDataProject = ref([]);
const materialsList = ref([]);
const pageLoading = ref(false);
const uuid = ref(route.query.id || "");
const classifyList = ref([]);
const _getBaseSetting = async ()=>{
    try{
        let result = await getBaseSetting();
        classifyList.value =  getFieldValue('销售分类',result,'id');
        _getComboDetail();
    }finally{

    }
}
_getBaseSetting()
const _getAllCommodityExtraAttributes = async ()=>{
    comboAttributesList.value = [];
    try{
        let result = await getAllCommodityExtraAttributes();
        if(result.comboAttributesList && result.comboAttributesList.length>0){
            comboAttributesList.value = result.comboAttributesList.filter(value=>value.disabled == 0).map(lis=>{
                if(lis.fieldType == 3 || lis.fieldType == 4){
                    lis.optionContent = lis.optionContent.split(",")
                }
                if(lis.fieldType == 4){
                    return {...lis,fieldValue:[]};
                }else{
                    return {...lis,fieldValue:""};
                }

            })
            console.log(comboAttributesList.value,222);
        }

    }catch(e){
        console.log(e);
    }
}
const _getComboDetail = async ()=>{
    pageLoading.value = true;
    try{
        await _getAllCommodityExtraAttributes();
        let result = await getComboDetail({id:uuid.value});
        form.value = {
            code:result.code,
            comboName:result.comboName,
            mnemonicCode:result.mnemonicCode,
            businessBrandId:result.businessBrandId?result.businessBrandId.split(","):[],
            activityImg:result.comboPictureList?result.comboPictureList.map(value=>{
                return value.url
            }):[],
            validity:result.validity,
            salesState:result.salesState,
            salesClass:getLabelById(result.salesClassIdList,classifyList.value),
            retailPrice:result.retailPrice,
            costPrice:result.costPrice,
            minSellingPrice:result.minSellingPrice, //最低售价
            needValue:"1"
        }
        shopForm.value = {
            mallInfoPut:result.mallInfoPut,
            mallInfoValidity:result.mallInfoValidity,
            mallInfoDetails:result.mallInfoDetails,
            mallPictureList:result.mallPictureList?result.mallPictureList.map(value=>{
                return value.url
            }):[],
            purchaseNotes:result.purchaseNotes
        }
        checkData.value = result.productList.map(lis=>{
            return {
                ...lis,
                id:lis.baseId,
                infoType:1,
                frequency:lis.times,
                unitPrice:lis.unitPrice,
                productName:lis.commodityName,
                code:lis.commodityCode,
                pictureUrl:lis.commodityPicture
            }
        })
        checkDataProject.value = result.projectList.map(lis=>{
            return {
                ...lis,
                id:lis.baseId,
                infoType:2,
                frequency:lis.times,
                unitPrice:lis.unitPrice,

                projectName:lis.commodityName,
                code:lis.commodityCode,
                firstPicture:lis.commodityPicture
            }
        })
        materialsList.value = [...checkData.value,...checkDataProject.value];
        result.attributeList.forEach(info=>{
            comboAttributesList.value.forEach(lis=>{
                if(info.extraAttributesId == lis.id){
                    lis.fieldValue = lis.fieldType ==4?info.extraAttributesValue.split(',').filter(value=>value!=""):info.extraAttributesValue
                }
            })
        })
        
    }catch(e){
        console.log(e);
    }finally{
        pageLoading.value = false;
    }
}
onActivated(()=>{
    if(uuid.value !== route.query.id){
        uuid.value = route.query.id;
        _getComboDetail();
    }

})


</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName"></TopBar>
        <div class="info-contain" v-loading="pageLoading">
            <div class="btn-opea">
                <el-radio-group v-model="moduleType">
                    <el-radio-button label="基础信息" />
                    <el-radio-button label="商城信息" />
                </el-radio-group>
            </div>
            <div class="info-lis" v-if="moduleType == '基础信息'">

                <el-form :model="form" label-width="100px">
                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">基础属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="套餐编号："  prop="number">
                                {{ form.code || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="套餐名称：" prop="name">
                                {{ form.comboName || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="助记码：" prop="code">
                                {{ form.mnemonicCode || '-' }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="经营品牌：">
                                {{ getBrandName(form.businessBrandId) }} 
                            </el-form-item>
                        </div>


                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="套餐图片：" prop="needValue" >
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <template v-if="form.activityImg.length">
                                        <el-image
                                        :src="item"
                                        :zoom-rate="1.2"
                                        :preview-src-list="[item]"
                                        :initial-index="4"
                                        style="width:160px;height:160px;margin-right:24px"
                                        v-for="(item,index) in form.activityImg"
                                        :key="index"
                                        />
                                    </template>
                                        <el-image
                                        v-else
                                        :src="'https://static.91medicine.net/jiuyang/img/404.png'"
                                        :zoom-rate="1.2"
                                        :preview-src-list="['https://static.91medicine.net/jiuyang/img/404.png']"
                                        style="width:160px;height:160px;margin-right:24px"                                     
                                        />
                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="套餐内容：">
                                <div style="width:100%;margin-top:8px" v-if="materialsList && materialsList.length>0">
                                    <el-table :data="materialsList" style="width: 100%" stripe>
                                        <el-table-column prop="name" label="名称">
                                            <template #default="scoped">
                                                <span v-if="scoped.row.infoType == 1">
                                                    <el-tooltip
                                                        class="box-item"
                                                        effect="dark"
                                                        :content="scoped.row.productName"
                                                        placement="top"
                                                    >
                                                        <div class="content-view">
                                                            {{ scoped.row.productName }} 
                                                        </div>
                                                    </el-tooltip>
                                                    <!-- {{ scoped.row.productName }} -->
                                                </span>
                                                <span v-else>
                                                    <el-tooltip
                                                        class="box-item"
                                                        effect="dark"
                                                        :content="scoped.row.projectName"
                                                        placement="top"
                                                    >
                                                        <div class="content-view">
                                                            {{ scoped.row.projectName }}
                                                        </div>
                                                    </el-tooltip>
                                                    <!-- {{ scoped.row.projectName }} -->
                                                </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="type" label="类型">
                                            <template #default="scoped">
      
                                                {{ ["","产品","项目"][scoped.row.infoType] }}
                                            </template>
                                        </el-table-column>

                                        <el-table-column prop="name" label="次数/数量">
                                            <template #default="scoped">
                                                {{ scoped.row.frequency || '-' }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="unitPrice" label="单价"></el-table-column>
                                        <el-table-column  label="价值金额">
                                            <template #default="scoped">

                                                <span v-if="scoped.row.frequency>0">{{ (Number(scoped.row.unitPrice) * Number(scoped.row.frequency)).toFixed(2)}}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="零售价">
                                            <template #default="scoped">
                                                <span>{{ scoped.row.retailPrice || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="零售金额">
                                            <template #default="scoped">
                                                <span>{{ scoped.row.retailAmount || '-' }}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                            </el-form-item>
                        </div>
                    </div>
                    <div class="is-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="套餐有效期：" >
             
                                <span style="line-height: 14px;color: #000000;font-size: 14px;margin-left:8px" v-if="form.validity">{{ form.validity }}天有效</span>
                                <span v-else>-</span>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="销售状态：" prop="status" >
                                {{ ["","正常","停售"][form.salesState] }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i">
                            <el-form-item label="销售分类：" >
                                {{ form.salesClass || '-' }} 
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="零售价：" >
                                {{ form.retailPrice || '-' }}
                            </el-form-item>
                        </div>
                        <div class="lis-i">
                            <el-form-item label="成本价：" >
                                {{ form.costPrice || '-' }}
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <el-form-item label="最低售价：" >
                                {{ form.minSellingPrice || '-' }}
                            </el-form-item>
                    </div>

                    <div class="lis-head">
                        <div class="icon-view">
                            <div class="icon-view-on"></div>
                        </div>
                        <span class="label-name">自定义属性</span>

                    </div>
                    <div class="lis-item">
                        <div class="lis-i lis-i-other" v-for="(item,index) in comboAttributesList" :key="index">
                            <div class="l-name">{{ item.fieldName }}：</div>
                            <div>
                                {{ item.fieldType === 4 ? (item.fieldValue?.join(',') || '-') : (item.fieldValue || '-') }}
                            </div>
    
                        </div>
 
                    </div>
                </el-form>
            </div>
            <div class="info-lis" v-if="moduleType == '商城信息'">
                <el-form :model="shopForm" label-width="120px">
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="允许上架商城：" prop="isUpload" >
                                {{ ["","允许上架","不允许上架"][shopForm.mallInfoPut] }}
                            </el-form-item>
                        </div>

                    </div>
                    <div class="is-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="有效期：" >
                                <span v-if="shopForm.mallInfoValidity">{{ shopForm.mallInfoValidity + '天'}}</span>
                                <span v-else>-</span>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="套餐详情：" >
                                {{ shopForm.mallInfoDetails || '-' }}
                            </el-form-item>
                        </div>

                    </div>
                    <div class="lis-item" v-if="shopForm.mallPictureList.length>0">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="" >
                                <div style="width:100%;position: relative;display:flex;justify-content:flex-start;flex-wrap:wrap">
                                    <el-image
                                    :src="item"
                                    :zoom-rate="1.2"
                                    :preview-src-list="[item]"
                                    :initial-index="4"
                                    style="width:160px;height:160px;margin-right:24px"
                                    v-for="(item,index) in shopForm.mallPictureList"
                                    :key="index"
                                    />

                                </div>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="lis-item">
                        <div class="lis-i" style="width:100%">
                            <el-form-item label="购买须知：">
                                <span>{{ shopForm.purchaseNotes || '-' }}</span>
                            </el-form-item>
                        </div>

                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
:deep(.el-table__inner-wrapper::before){
    display:none;
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;
}
:deep(.el-dialog__body){
    padding:0 4px;
}
:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
.page-contain{
    width: 100%;
    height: 100%;
    :deep(.el-table th > .cell){
        border-right: 0;;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner){
        border-left:1px solid #3480FF;
    }
    .info-contain{
        width: 100%;
        height: calc(100% - 48px);
        box-sizing: border-box;
        padding:16px 24px;
        .btn-opea{
            width: 100%;
            height: 32px;
        }
        .info-lis{
            width: 100%;
            height: calc(100% - 32px);
            box-sizing:border-box;
            padding-top:24px;
            overflow:auto;
            .lis-head{
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    padding-bottom:16px;
                    .icon-view{
                        margin-right: 8px;
                        position: relative;
                        width: 14px;
                        height: 14px;

                        &::before {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #10E7F9; 
                        }
                        .icon-view-on{
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            width: 10px;
                            height: 10px;
                            border-radius: 2px;
                            background-color: #3480FF; /* 背景色 */
                        }
                    }
                    .label-name{
                        color: #000000;
                        font-weight: bold;
                        font-size: 14px;
                        margin-right: 8px;
                    }
                    img{
                        width: 14px;
                        height: 14px;
                        cursor: pointer;
                    }
                }
        }
        .lis-item{
            width: 100%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .lis-i{
                width: calc(100% / 3);
                margin-bottom:10px;
            }
            .lis-i-other{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .l-name{
                    width: 90px;
                    text-align: right;
                    word-break: break-all;
                    word-wrap: break-word;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    min-height: 32px;
                    padding: 0 12px 0 0;
                    font-size: var(--el-form-label-font-size);
                    color: var(--el-text-color-regular);
                    line-height: 20px;
                }
                
            }
        }
    }
    :deep(.el-table__row){
        .el-input .el-input__wrapper{
            background: rgba(0,0,0,0);
        }
    }
}
.input-line{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom:16px;
    &:last-child{
        margin-bottom:0px;
    }
    img{
        cursor: pointer;
        width: 16px;
        height: 16px;
        margin-left:8px;
    }
}
.project-info{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .img{
        width: 48px;
        height: 48px;
        

    }
    .name-info{
        width:calc(100% - 56px);
        box-sizing: border-box;
        padding-left:8px;
        .p1{
            width: 100%;
            color: #222222;
            font-weight: bold;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
        .p2{
            width: 100%;
            margin-top:8px;
            color: #666666;
            line-height: 14px;
            font-size: 14px;
            height: 14px;
        }
    }
}

.content-view{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
}
</style>